<template>
	<view class="container" :style="{'background-color':pageBg}" style="float: left;width: 100%;min-height: 100%;">

		<view class="top_box" v-if="itemList.length>0">
			<view v-for="(item, index) in itemList" :key="index" class="item  css-theme" :class="[cueTheme]" @click="goAdd(item)">

				<view class="container_box">
					<view style="float: left;width: 100%;margin-bottom: 10px;font-size: 16px;">
						<view style="float: left;font-weight: bolder;">{{item.title}}</view>
						<view style="float: right;color: #ccc;">{{item.createTime.split(" ")[0]}}</view>
					</view>
					<view  style="float: left;width: 100%;clear: both;color: #ccc;">
						<view style="float: left;width: 20%;" v-if="getFirstImageUrl(item.info)">
							<u-lazy-load  :image="globalImgUrl+getFirstImageUrl(item.info)" 
							style="width: 100rpx;float: left;height: 100rpx;border-radius: 5px;border:1px solid #f1f1f1;"></u-lazy-load>
							
						</view>
						<view v-if="getFirstImageUrl(item.info)==''" style="float: left;width: 100%;">
							<rich-text class="content-view" :nodes="getRich(item.info)"></rich-text>
						</view>
						<view v-else style="float: left;width: 80%;">
							<rich-text class="content-view" :nodes="getRich(item.info)"></rich-text>
						</view>
					</view>
					
				</view>

			</view>
		</view>
		<view v-else>
			<view class="empty__item" style="padding-top: 30vh;">
				<tn-empty icon="/static/images/empty.png" text="天气真好,适合再睡一觉"></tn-empty>
			</view>
		</view>


	</view>
</template>

<script>
	var _self
	

	export default {
		data() {
			return {
				globalImgUrl: getApp().globalData.lineUrlImg,
				items: [],
				itemList: [],
				user: [],

			};
		},
		onLoad(options) {
			_self = this;

		},
		onShow() {
			uni.getStorage({
				key: 'user',
				success: function(res) {
					if (res.data) {
						_self.user = res.data
						_self.getList()
					}
				},
				fail: function(e) {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			})

		},
		// 下拉监听
		onPullDownRefresh() {
			uni.showNavigationBarLoading(); // 头部标题刷新
			_self.getList()
		},
		methods: {
			getFirstImageUrl(richText) {
				const imgReg = /<img .*?src=['"](.*?)['"][^>]*>/g;
				const imgTags = richText.match(imgReg);
				let firstImageUrl = '';
				if (imgTags && imgTags.length > 0) {
					const imgTag = imgTags[0];
					const srcReg = /src=['"](.*?)['"]/;
					const matched = imgTag.match(srcReg);
					if (matched && matched.length > 1) {
						firstImageUrl = matched[1];
					}
				}
				return firstImageUrl;
			},
			getRich(texts) {
				let text1 = texts.replace(/<\/?(img|table)[^>]*>/g, ""); //去除图片、表格
				let text2 = text1.replace(/<\/?.+?>/g, ""); //去除标签包裹
				let text3 = text2.replace(/[ | ]*\n/g, '\n'); //去除行尾空白
				let text4 = text3.replace(/ /g, ""); //去除空格
				return text4;
			},
			checkThis(item) {
				var index = _self.items.indexOf(item.id)
				if (index > -1) {
					_self.items.splice(index, 1)
				} else {
					_self.items.push(item.id)
				}
				console.log(_self.items)
			},

			goAdd(item) {
				
				if (item == 0) {
					uni.navigateTo({
						url: '/pages/me/newsDetail?id=0' + "&userId=" + _self.user.id
					});
				} else {
					uni.navigateTo({
						url: '/pages/me/newsDetail?id=' + item.id + "&userId=" + _self.user.id 
					});
				}

			},
			
			getList() {
				var data = {
					userId: _self.user.id
				}
				this.$api.listNotice(data).then((res) => {
					var resData = res;
					uni.stopPullDownRefresh(); // 停止下拉刷新
					uni.hideNavigationBarLoading();
					console.log(resData)
					if (resData.code == "200") {
						_self.itemList = resData.data;
					}
				})
				
			},
			
		}
	};
</script>

<style lang="scss" >
	page {
		height: 100%;
		width: 100%;
		margin: 0;
		background-color: $page-bg !important;
	}
	
	.css-theme {
		@include text-color();
		@include base-background();
		@include border-color();
		@include shadow-color();
	}

	.content-view {
		float: left;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	.container {
		padding: 20rpx;
		position: relative;

	}

	.top_box {
		float: left;
		width: 100%;
		padding-bottom: 120rpx;
	}

	.item {
		margin-bottom: 20rpx;
		background-color: #ffffff;
		padding: 15px;
		border-radius: 5px;
		float: left;
		width: 100%;
	}

	.field {
		display: flex;
		align-items: center;
	}

	.row {
		flex-direction: row;
	}

	.label {
		font-weight: bold;
		margin-right: 10rpx;
	}

	.value {
		flex: 1;
		color: #ccc;
		font-size: 13px;
	}

	.copy {
		/* margin-left: 10rpx; */
		background-color: none;
		border: none;
		color: #333;
		padding: 5rpx 10rpx;
		font-size: 14px;
		margin-left: auto;
		margin-right: 1px;
	}

	.fixed-image {
		position: fixed;
		right: 20px;
		/* 可根据需要调整位置 */
		bottom: 20px;
		/* 可根据需要调整位置 */
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
	}

	.fixed-image image {
		width: 80rpx;
		height: 80rpx;
	}

	.bottom {
		display: flex;
		align-items: center;
		cursor: pointer;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}

	.bottom text {
		text-align: left;
	}

	.icon_right {
		width: 20px;
		height: 20px;
		margin-left: auto;
		margin-right: 1px;

	}

	.icon_left {
		width: 20px;
		height: 20px;
	}

	.container_box {
		/* display: flex; */
		justify-content: space-between;
		align-items: center;
		/* padding: 10rpx 10rpx; */
		/* border: 1px solid #f1f1f1; */
		/* margin: 16rpx 0rpx; */
	}

	/* .left {
		display: flex;
		align-items: center;
	} */

	.image {
		width: 20px;
		height: 20px;
	}

	.text {
		margin-left: 10px;
	}

	.text-min {
		font-size: 12px;
		color: #ccc;
	}


	.button_v {
		margin-left: 10px;
		background-color: none;
		border: none;
		color: #333;
		padding: 5rpx 10rpx;
		font-size: 14px;

	}

	.popover {
		position: absolute;
		top: 80px;
		right: 10px;
		width: 120px;
		background-color: #f0f0f0;
		border-radius: 4px;
		z-index: 999;
	}

	.option {
		padding: 12px;
		color: #333;
		font-size: 14px;
	}

	.bottom_text {
		padding-left: 10rpx;
	}

	.bottom_text_style {
		font-size: 12px;
		color: #ccc;
	}
</style>